<template>
    <div>
        <h3>State</h3>
        <p>a:{{ a }}</p>
        <p>b:{{ b }}</p>
        <hr>
        <h3>getters</h3>
        <p>doubleA:{{ doubleA }}</p>
        <p>doubleB:{{ doubleB }}</p>
        <p>both:{{ both }}</p>
        <p>doubleBoth:{{ doubleBoth }}</p>
        <h3>方法_同步</h3>
        <p><button @click="addA(10)">a++</button><button @click="a++">a++</button></p>
        <p><button @click="addB">b++</button><button @click="b++">b++</button></p>

        <h3>方法_异步</h3>
        <p><button @click="addA_Async(10)">a++</button></p>
        <p><button @click="addB_Async">b++</button></p>
        <p><button @click="addBoth_Async">both++</button></p>
    </div>
</template>

<script>
    import {mapState,mapWritableState,mapActions} from "pinia";
    import {useMdaStore} from "@/stores/mda.js";

    // 选项式写法 => 辅助函数


    export default {
        name:"PiniaBaseView",
        data(){
            return {
            }
        },
        computed:{
            // mapState() 处理useMdaStore,只有取值处理,没有设置赋值处理 => 只读
            // ...mapState(useMdaStore,["a","b","doubleA","doubleB","both","doubleBoth"]),

            // mapWritableState()  处理useMdaStore, 既可以取值也可以赋值
            ...mapWritableState(useMdaStore,["a","b","doubleA","doubleB","both","doubleBoth"]),
            
        },
        methods:{
            ...mapActions(useMdaStore,["addA","addB","addA_Async","addB_Async","addBoth_Async"])
        },
        mounted(){
            console.log("mdA",this.mdA);
        }
    }
</script>

<style lang="scss" scoped>

</style>